<script setup lang='ts'>
import { ref, reactive, onMounted } from 'vue'
import { getHui } from '@/api/canvas'
import {Edit} from '@element-plus/icons-vue'
//定义协作作品值
const worksData=ref<Array<any>>([])
const showBtns=ref(false)//
// const username=sessionStorage.getItem("username") as string;
//获取用户大名
//获取添加协作滴请求


//移入
const onmouseenter=(item:Object | any |[])=>{
console.log(item,"==================items=========");
item.showBtns=true

}
//移出
const onmouseleave=(item:Object | any |[])=>{
  item.showBtns=false
}
const username=sessionStorage.getItem('username')
onMounted(() => {
  getHui(username).then((res: any) => {
  console.log(res, "协力");
  //解构赋值享受迷惘
  let { data } = res.data

  console.log(data,"dsffffffffffff四大发明单身快乐刚看到刷卡管他的天然扩大虽然");
  
 worksData.value=data

})

})
</script>

<template>
  <div class="xz">
    <div class="cooperation">
      <div class="mywork" @mouseenter="onmouseenter(item)" @mouseleave="onmouseleave(item)"  v-for="(item, index) in worksData " :key="index"
       >
        <img :src="item.Base64" alt="" />
        <Transition>
          <div class="btns" v-show="item.showBtns">
            <el-button type="primary" :icon="Edit" circle />
          </div>
        </Transition>
      </div>
    </div>
  </div>
</template>

<style lang='scss' scoped></style>